﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="author" content="Kodinger">
	<title>My Login Page &mdash; Bootstrap 4 Login Page Snippet</title>
	<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/static/customer/css/my-login.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body class="my-login-page">
<section class="h-100">
	<div class="container h-100">
		<div class="row justify-content-md-center h-100">
			<div class="card-wrapper">
				<div class="brand">
					<img src="/static/customer/img/logo.jpg">
				</div>
				<div class="card fat">
					<div class="card-body">
						<h4 class="card-title">Login</h4>
						<form>
							<div class="form-group">
								<label for="username">username</label>
								<input id="username" type="email" class="form-control" name="username" value="" required autofocus>
							</div>
							<div class="form-group">
								<label for="password">Password</label>
								<input id="password" type="password" class="form-control" name="password" required data-eye>
							</div>
							<div class="form-group no-margin">
								<button type="button" class="btn btn-primary btn-block" onclick="login()">
									Login
								</button>
							</div>
							<div class="margin-top20 text-center">
								Don't have an account? <a href="/view/customer-register">Create One</a>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script>
	function login() {
		$.ajax({
			url:"../customer/login",
			dataType:"json",
			type:"post",
			data:{
				username:$("#username").val(),
				password:$("#password").val(),
			},
			success:function (data) {
				alert(data.message);
				if (parseInt(data.code)==200) {
					location.href = "../view/customer-index";
				}
			},
			error:function () {
				alert("客户登录请求出错");
			}
		});
	}
</script>
</body>
</html>
